import { history } from "@umijs/max";
import React, {forwardRef, useEffect, useImperativeHandle, useState} from "react";
import { Button, Space, Table, TableColumnType } from "antd";
import { checkOrderTypes, preOrderTypes  } from "@/constants/types";
import { fetchOrderCheckRecordList } from "../services";
import { calculateTableWidth, downloadFile } from "@/utils/util";
import XlTableDictColumn from "@/components/Table/XlTableDictColumn";

interface tabProps {
  searchValue: any;
  activeKey: string;
  tabKey: string,
  refreshNum: Function
}

const statusMaps: any = {
  totalNum: undefined,
  waitCheckNum: '1',
  checkSuccessNum: '2',
  checkFailedNum: '-1'
}

const OrderVerifyTable = forwardRef(({searchValue = {}, activeKey, tabKey, refreshNum}: tabProps, ref) => {
  const [dataSource, setDataSource] = useState([]);
  const [pagination, setPagination] = useState({
    pageNum: 1,
    pageSize: 10,
    total: 0
  });



  const search = async (params:{pageNum: number; pageSize: number} = {
    pageNum: 1,
    pageSize: 10
  }) => {
    const res = await fetchOrderCheckRecordList({
      ...searchValue,
      ...params,
      checkStatus: statusMaps[activeKey]
    });
    setDataSource(res?.data || []);
    setPagination({
      ...params,
      total: res?.total
    });
  }


  const refreshTable = () => {
    if (activeKey !== tabKey) {
      return ;
    }
    search({
      pageNum: 1,
      pageSize: 10
    });
  }
  // 查看委托单
  const showEntrust = (record: checkOrderTypes) => {
    if (record?.entrustFilePath) {
      downloadFile(record?.entrustFilePath);
    }
  }
  // 审核单详情
  const toCheckOrderDetail = (record: checkOrderTypes) => {
    history.push(`/order-manage/order-verify-detail?id=${record?.id}`)
  }

  useImperativeHandle(ref, () => ({
    refreshTable
  }));

  useEffect(() => {
    if (tabKey === activeKey) {
      search({
        pageNum: pagination.pageNum,
        pageSize: pagination.pageSize
      });
    }
  }, [tabKey, activeKey]);

  const fieldColumns: TableColumnType<preOrderTypes> [] = [
    {
      title: '订单号',
      dataIndex: 'orderCode',
      width: 120
    },
    {
      title: '外部单号',
      dataIndex: 'exOrderCode',
      width: 120
    },
    {
      title: '审核状态',
      dataIndex: 'checkStatus',
      width: 120,
      render: (_, record) => <XlTableDictColumn value={record?.checkStatus} type="orderCheckStatus" />
    },
    {
      title: '业务时间',
      dataIndex: 'businessTime',
      width: 180
    },
    {
      title: '审核人',
      dataIndex: 'checkBy',
      width: 120
    },
    {
      title: '下单销售',
      dataIndex: 'salesName',
      width: 120
    },
    {
      title: '下单公司简称',
      dataIndex: 'customerName',
      width: 150,
      ellipsis: true,
    },
    {
      title: '下单手机号',
      dataIndex: 'mobile',
      width: 120
    },
    {
      title: '备注',
      dataIndex: 'remark',
      width: 150,
      ellipsis: true,
    },
    {
      title: '操作',
      dataIndex: 'options',
      width: 200,
      fixed: 'right',
      render: (_, record) => {
        return (
          <Space>
            {record?.entrustFilePath && <Button type="link" onClick={() => showEntrust(record)}>查看委托单</Button>}
            <Button type="link" onClick={() => toCheckOrderDetail(record)}>{String(record?.checkStatus) === '1' ? '订单审核':'查看详情'}</Button>
          </Space>
        );
      }
    },
  ];
 

  const getColumns = () => {
    return fieldColumns;
  }

  return (
    <>
      <Table
         bordered
         rowKey="id"
         dataSource={dataSource}
         columns={getColumns()}
         scroll={{x: calculateTableWidth(getColumns())}}
         pagination= {{
          showTotal: (total: number) => `共 ${total} 条`,
          ...pagination,
          onChange: (pageNum, pageSize) => {
            search({pageNum, pageSize});
          }
         }}
      /> 
    </>
  );
});


export default OrderVerifyTable;